<template>
  <div>
    <div class="shareBox">
      <TopBar color='#fff' style="backgroundColor:transparent">邀请返利</TopBar>
      <div class="shareContent">
        <img src="../../../../static/assets/sharebg1.jpg" style="width:100%;float:none"/>
        <!-- <x-img style="margin-top:4.3467rem" src="http://localhost/bizhuan/src/assets/sharebg2.jpg"></x-img>  -->
        <div class="shareRules">
          <Title title="邀请规则"></Title>
          <div >
            <div class="shareRow vux-1px-t">
              <p class="rowText">
                邀请一位好友成功投资<span v-text="touzi1"></span>元以上
              </p>
              <p class="roleText">
                奖励 <span v-text="jl1"></span>元
              </p>
            </div>
            <div class="shareRow vux-1px-t">
              <p class="rowText">
                邀请五位好友成功投资<span v-text="touzi2"></span>元以上
              </p>
              <p class="roleText">
                奖励 <span v-text="jl2"></span>元
              </p>
            </div>
            <div class="shareRow vux-1px-tb">
              <p class="rowText">
                邀请人可同时享受被邀请人投资金额<span v-text="jl3"></span>%的奖励
              </p>
              <div class="roleText">
                <!-- <div class="text1"> -->
                  奖励
                  <span style="font-weight:bold" v-text="jl3"></span>%
                <!-- </div> -->
              </div>
            </div>
          </div>
          <div class="shareRulesHint">
            奖励发放：被邀请人成功投资后，奖励将在T+2个工作日内打入邀请人账户，奖励可直接提现，此活动最终解释权归比赚所有。
          </div>
        </div>
        <div class="shareNum">
          <span style="color:#939393">邀请码</span>
          <h1 v-text="roleItem.yqm"></h1>
          <div class="numRow">
            <div>
              邀请人数 <span v-text="roleItem.yqrs"></span>人
            </div>
            <div>
              邀请奖励 <span v-text="parseInt(roleItem.yqjl)">0</span>元
            </div>
          </div>
          <span class="checkDetail" @click="toDetail">查看明细记录 ></span>
        </div>
      </div>
    </div>
    <div class="shareTo">
      <p class="shareBtn" @click="showQrcode">立即邀请拿返利</p>
    </div>
    <div v-transfer-dom>
      <x-dialog v-model="show" class="dialog-demo" hide-on-blur>
        <div class="codeBox">
          <img 
          src="../../../../static/assets/sharetxt.png"
          class="shareimg"
          />
          <qrcode 
            :value="url"
            type="img"
            :size="size" ></qrcode>
            <div class="codeText">
              <p>长按图片保存</p>
              <p>分享好友，拿邀请返利</p>
            </div>
        </div>
      </x-dialog>
      <!-- <popup v-model="show1" class="dialog-demo" hide-on-blur>
        <div class="shareBoxAlert">
          <p>选择分享方式</p>
          <div class="shareBtns">
            <img src="../../../assets/share_f.png">
            <img src="../../../assets/share_p.png">
            <img src="../../../assets/share_l.png" @click="copyUrl">
          </div>
          <input type="text" id="copyLink">
        </div>
      </popup> -->
    </div>
    <toast 
      v-model="showPositionValue" 
      type="text" 
      :time="2000" 
      is-show-mask 
      :text="msg" 
      position="middle"></toast>

  </div>
</template>
<script>
// import {wxShare} from '../../../service/getData.js'
import {XImg,XDialog,Qrcode,Popup,TransferDomDirective as TransferDom } from 'vux'
import TopBar from '../../component/common/TopBar'
import Title from '../../component/common/Title'
import {getShare} from '../../../service/getData.js'
import {getStore,showMsg} from '../../../config/mUtils.js'
import { Toast } from 'vux'
import {getSDK} from '../../../service/wxShare.js'

export default {
  components:{
    Qrcode,
    XDialog,
    XImg,
    TopBar,
    Title,
    Popup,
    Toast
  },
  beforeCreate(){
      getSDK()
    },
  directives: {
    TransferDom
  },
  created () {
    getShare(getStore('loginkey'))
      .then(res=>{
        //console.log(res)
        if(res.status == 1){
          this.roleItem = res
          this.touzi1 = res.data1.touzi
          this.touzi2 = res.data2.touzi
          this.jl1 = res.data1.jiangli
          this.jl2 = res.data2.jiangli
          this.jl3 = res.data3.jiangli
          this.url = 'https://www.bigzhuan.com/registerActivity?yqm='+res.yqm
        }
      })
  },
  data(){
    return {
      res:{},
      show:false,
      show1:false,
      list:[],
      roleItem:{},
      touzi1:'',
      touzi2:'',
      jl1:'',
      jl2:'',
      jl3:'',
      size:120,
      url:'',
      isAPP:getStore('type'),
      msg:'',
      showPositionValue:false,
    }
  },
  methods:{
    copyUrl(){
      let input = document.getElementById('copyLink')
      input.value = this.url
      input.select()
      document.execCommand('copy',false,null)
      showMsg('复制成功',this)
    },
    showQrcode(){
      if(getStore('type')){
        window.postMessage(this.url)//发送到RN
        // this.show1 = true
      }else{
        this.show = true
      }
    },
    toDetail(){
      this.$router.push({name:'ShareDetail',params:{list:this.roleItem}})
    }
  }
}
</script>
<style lang="less">
  @import '../../../style/mixin.less';

  .shareBox{
    padding-bottom: 1.6rem;
    .shareContent{
      .shareNum{
        .bs();
        .wh(90%,4.8rem);
        max-width: 9rem;
        margin:0 auto;
        position: absolute;
        top:9rem;
        left:.5rem;
        box-shadow:2px 2px 10px #aaa;
        .bg(#fff);
        text-align: center;
        padding-top: 0.6133rem;
        .checkDetail{
          .sc(0.36rem,#5d8de7);
          margin-top: 0.7rem;
          display: inline-block;
        }
        .numRow{
          .fx(row,space-around);
          .sc(0.3733rem,#000);
          margin: 0 auto;
          width: 80%;
          margin-top: .36rem;
          div:first-child::before,div:last-child::before{
            content:'';
            .wh(0.5333rem,0.3733rem);
            display: inline-block;
            background:url('../../../../static/assets/shareicon1.jpg');
            background-size: 100%;
          }
          div:last-child::before{
            background-image:url('../../../../static/assets/shareicon2.png')
          }
        }
      }
      .shareRules{
        margin: 0 auto;
        margin-top: 4.3rem;
        .wh(85%,100%);
        .shareRow{
          padding: .3rem 0;
          .fx(row,space-between);
          .sc(0.38rem,#000);
          .rowText{
            width: 44%;
          }
          .roleText::before{
            content: '';
            display: inline-block;
            .wh(0.5333rem,0.3733rem);
            background-image: url('../../../../static/assets/shareicon2.png');
            background-size: 100%;
          }
          .text1{
            position: relative;
          }
          .roleText1::before{
            content: '';
            display: inline-block;
            .wh(0.5333rem,0.3733rem);
            background-image: url('../../../../static/assets/shareicon2.png');
            background-size: 100%;
            position: absolute;
            right: 2.45rem;
            top: .66rem;
          }
        }
        .shareRulesHint{
          margin-top: .2rem;
          .sc(.35rem,#939393)
        }
      }
    }
  }
  .shareTo{
    .wh(100%,1.6rem);
    max-width: 10rem;
    position: fixed;
    bottom:0;
    .bg(#fff);
    .fx();
    .shareBtn{
      .wh(90%,80%);
      .borderRadius(1rem);
      .sc(0.4rem,#fff);
      .bg(#e44d2c);
      .fx();
    }
  }
  .codeBox{
    .wh(100%,8.5867rem);
    .bs();
    .fx(column);
    // margin:0 auto;
    padding-top: 0.8rem;
    .shareimg{
      .wh(4.8rem,1.3333rem);
      margin-bottom: 0.6rem;
    }
    .codeText{
      margin-top: 0.6rem;
      p{
        .sc(0.4rem,#939393)
      }
    }
  }
  .shareBoxAlert{
    .wh(100%,3.7867rem);
    .bg(#fff);
    .sc(0.3733rem,#666);
    .fx(column);
    .bs();
    padding: 0;
    .shareBtns{
      margin-top: .5rem;
      img{
        .wh(1.2533rem,1.7467rem)
      }
      img:nth-child(2){
        margin:0 1rem
      }
    }
    #copyLink{
      position: relative;
      z-index: -10;
    }
  }
  .weui-toast,.weui-toast_text,.vux-toast-middle{
        width: 70% !important;
      }
</style>
